<template>
  <div class="login">
    <div class="option">
      <div :class="{'active':isActive}" @click="chang(true)">登录</div>
      <div :class="{'active':!isActive}" @click="chang(false)">注册</div>
    </div>
    <inputL v-show="isActive" text="登录" @login="getData"></inputL>
    <inputL v-show="!isActive" text="注册" @login="getData">
      <template v-slot:compellation>
        <input type="text" v-model="name" placeholder="请输入姓名" />
        <hr />
      </template>
    </inputL>
  </div>
</template>

<script>
import { login, enroll } from "request/useData";
import { skip } from "ulit/skipRouter.js";
import inputL from "components/share/loginPage/inputCom";
export default {
  name: "login",
  data() {
    return {
      isActive: true,
      name: "",
    };
  },
  components: {
    inputL,
  },
  methods: {
    //改变登录显示还是注册显示
    chang(val) {
      this.isActive = val;
    },
    //获取子组件传过来的学号和密码
    getData(number, paw) {
      if (number != "" && paw != "") {
        if (this.isActive) {
          //登录
          login(number, paw).then((res) => {
            if (res.data.status) {
              document.cookie = `id=${res.data.token}`;
              skip(this, "home");
            } else {
              alert(`${res.data.err}`);
            }
          });
        } else {
          //注册
          enroll(number, paw, this.name).then((res) => {
            if (res.data.status) {
              alert(res.data.lay);
            } else {
              alert(res.data.err);
            }
          });
        }
      } else {
        alert("请填写完整");
      }
    },
  },
};
</script>
<style scoped lang='less'>
.login {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("~@/assets/img/login.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .option {
    width: 50%;
    display: flex;
    text-align: center;
    color: #ffff;
    div {
      flex: 1;
      padding: 0.5rem;
      font-size: 1.2rem;
    }
    .active {
      background-color: #5706a4;
      border-radius: 5%;
    }
  }
}
</style>